<template>
  <!-- 普通版 -->
  <n-tooltip :show="showPopover" placement="top" v-if="useType === 'normal'">
    <template #trigger>
      <div class="wrapper">
        <div
          ref="tagsRef"
          @mouseenter="() => (!showMore && showExpand ? (showPopover = true) : '')"
          @mouseleave="() => (showPopover = false)"
          class="tags_wrapper"
          :class="[!showMore ? 'basic_height' : 'max_height']"
        >
          <span class="tags_item" v-for="item in tags" :key="item">{{ item }}</span>
        </div>
        <div v-if="showExpand" class="expand" @click="changeState">
          {{ !showMore ? expandText : packText }}
        </div>
      </div>
    </template>

    <!-- 暴露提示框给使用者自定义 -->
    <slot name="diyTooltip">
      <div class="tags_wrapper">
        <span class="tags_item" v-for="item in tags" :key="item">{{ item }}</span>
      </div>
    </slot>
  </n-tooltip>

  <!-- 简约版 -->
  <n-ellipsis expand-trigger="click" :line-clamp="lineClamp" v-else>
    <span class="tags_item" v-for="item in tags" :key="item">{{ item }}</span>

    <!-- 暴露提示框给使用者自定义 -->
    <template v-if="diyTooltip" #tooltip>
      <slot name="diyTooltip"></slot>
    </template>
  </n-ellipsis>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    tags: string[]
    useType?: 'simple' | 'normal' // 使用类型
    diyTooltip?: boolean // 是否自定义toolTip

    // 带展开收起按钮版本参数
    propLineClamp?: number // 最大行数省略
    expandText?: string // 展开文本
    packText?: string // 收起文本
    marginRight?: number // 每项右边距 带单位px
  }>(),
  {
    useType: 'simple',
    diyTooltip: false,

    // 带展开收起按钮版本参数
    propLineClamp: 1,
    expandText: '展开',
    packText: '收起',

    marginRight: 6
  }
)

const tagsRef = ref<HTMLElement | null>(null)
const lineClamp = ref<number>() // 最大行数省略
const showMore = ref(false) // 控制按钮文字为展开还是收起
const showPopover = ref(false) // 控制toolTip的展示
const showExpand = ref(false) // 控制展开收起按钮

const formatMarginRight = computed(() => {
  return props.marginRight + 'px'
})

function changeState() {
  showMore.value = !showMore.value
  if (showMore.value) {
    lineClamp.value = undefined
  } else {
    lineClamp.value = props.propLineClamp
  }
}

// 计算是否显示，展开收起按钮
function calculateShowExpand() {
  if (props.useType === 'simple') return
  const width = (tagsRef.value as HTMLElement).clientWidth
  const items = document.getElementsByClassName('tags_item')
  const itemTotalWidth = Array.from(items)?.reduce((pre, cur) => {
    return pre + cur.clientWidth + 2 // 2为boder宽度*2
  }, 0)
  const contentWidth = itemTotalWidth + (items.length - 1) * props.marginRight // props.marginRight为每项marginRight的值
  if (contentWidth > width) {
    showExpand.value = true
  }
}

onMounted(calculateShowExpand)

watch(
  () => props.propLineClamp,
  (val) => {
    if (val) {
      lineClamp.value = val
    }
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.tags_item {
  display: inline-block;
  padding: 2px 6px;
  background: #ffeeeb;
  border-radius: 3px;
  border: 1px solid #fe5332;
  color: #fe5332;
  margin-bottom: 4px;
  &:not(:last-child) {
    margin-right: v-bind(formatMarginRight);
  }
}

.wrapper {
  position: relative;
  display: flex;
  padding-right: 34px;
  .tags_wrapper {
    position: relative;
    display: -webkit-box;
    flex-grow: 1;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: v-bind(lineClamp);

    width: 100%;
    margin-bottom: -4px;
    transition: all 0.5s linear;

    &.basic_height {
      max-height: 34px;
    }

    &.max_height {
      max-height: 136px;
    }
  }

  .expand {
    position: absolute;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    color: #1d85ff;
    cursor: pointer;
  }
}
</style>
